<template>
  <button @click="activeIndex = 0">home</button>
  <button @click="activeIndex = 1">movie</button>
  <button @click="activeIndex = 2">about</button>
  <hr />

  <component :is="tabs[activeIndex]" />
  <!-- <div is="vue:about"></div> -->
</template>

<script setup>
import Home from './Home.vue'
import Movie from './Movie.vue'
import About from './About.vue'

import { ref } from 'vue'

const tabs = [Home, Movie, About]
const activeIndex = ref(0)
</script>

<style scoped></style>
